<template>
	<view class="declaration-order">
		<!-- 选择地址 -->
		<view class="box address">
			<view class="icon-address"></view>
			<view class="address-content">
				<view class="address-contact">
					<view class="contact-name font-address">刘姥姥</view>
					<view class="contact-mobile font-address">18888888888</view>
				</view>
				<view class="address-detail font-address">湖南省长沙市岳麓区麓谷街道麓谷企业广场E5栋2单元</view>
			</view>
			<view class="icon-arrow"></view>
		</view>
		<!-- 用户手机号检测 -->
		<view class="box mobile-check">
			<view class="check-box">
				<input class="check-input" type="text" value="" placeholder="请输入用户平台注册手机号" />
				<view class="check-button">检测</view>
			</view>
			<view class="check-result" v-if="checkResult === 'success'">检测成功！<text class="check-user">用户名称：周博</text></view>
			<view class="check-result" v-else-if="checkResult === 'fail'">检测失败！该账号没有在平台注册，请注册后重试</view>
		</view>
		<!-- 产品信息 -->
		<view class="box product">
			<image class="product-image" src="" mode="aspectFit"></image>
			<view class="product-info">
				<view class="product-name">我是商品名称我是商品名称我是商品名称我是商名称商…</view>
				<view class="product-desc">
					<view class="product-desc-item">型号:大号</view>
					<view class="product-desc-item">颜色:白色的</view>
				</view>
				<view class="product-price">789.00</view>
			</view>
			<view class="product-number">x1</view>
		</view>
		<view class="combined">
			<view class="combined-amount">合计: <view class="combined-value">¥789.00</view>
			</view>
			<view class="combined-button" @click="toDebt">结算(1)</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkResult:''
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';

	.box {
		margin: 24rpx 30rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.address {
		@include flex(space-between, flex-start);

		.icon-address {
			width: 48rpx;
			height: 48rpx;
			@include bgm('icon-address.png');
		}

		.address-content {
			margin-left: 24rpx;
			margin-right: 48rpx;
			flex-grow: 2;
			.font-address {
				font-size: 28rpx;
				color: #303133;
				line-height: 40rpx;
			}

			.address-contact {
				@include flex(flex-start);


				.contact-name {}

				.contact-mobile {
					margin-left: 16rpx;
				}

				.address-detail {
					margin-top: 12rpx;
				}
			}
		}

		.icon-arrow {
			width: 34rpx;
			height: 34rpx;
			@include bgm('icon-arrow.png')
		}
	}

	.mobile-check {
		.check-box {
			padding-left: 30rpx;
			width: 630rpx;
			height: 72rpx;
			background: #F5F5F5;
			border-radius: 36rpx;
			@include flex(space-between);
			.check-input {
				font-size: 28rpx;
				color: #909399;
			}

			.check-button {
				@include flex;
				width: 128rpx;
				height: 72rpx;
				background: #FF4544;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.check-result {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #FF4544;
			line-height: 40rpx;
		}

		.check-user {
			color: #909399;
		}
	}
</style>
